<template>
  <div class="home-wrap">
    <div class="banner">
      <div class="banner-content">
        <div class="banner-text">
          <div class="title">Scientific Inquiry</div>
          <div class="addition">Develop children's intertest</div>
          <div class="btn">
            <van-button round
                        color="#1989fa"
                        class="btn-about">了解我们</van-button>
          </div>
        </div>
        <div class="banner-image">
          <img src="/src/assets/images/mechine2.png" />
        </div>
      </div>
    </div>
    <!--浮动功能导航-->
    <div class="float-nav">
      <div class="float-nav-box">
        <div v-for="item in data.floatNav"
             :key="item">
          <router-link :to="item.derectTo">
            <div class="float-nav-item">
              <van-icon class="float-nav-item-icon"
                        :name="item.vIcon"
                        :color="item.color"
                        :size="item.size"
                        :badge="item.badge" />
              <font class="float-nav-item-text"
                    :color="item.color">{{
                item.text
              }}</font>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!--推荐课程-->
    <div class="commonWrap course-recommend">
      <router-link class="wrap"
                   :to="{
          name: 'CourseInfo',
          params: { courseId: 1 },
        }">
        <div class="image">
          <img :src="data.courseRecommend.image" />
        </div>
        <div class="text">
          <div class="title">{{ data.courseRecommend.title }}</div>
          <div class="price">
            <div class="nowprice">￥{{ data.courseRecommend.nowprice }}</div>
            <del class="oldprice">￥{{ data.courseRecommend.oldprice }}</del>
            <van-button color="#fdb52b"
                        class="btn">了解一下</van-button>
          </div>
        </div>
      </router-link>
    </div>
    <!--本周待完成课程-->
    <div class="commonWrap courseItmeWrap">
      <van-cell title="本周待完成课程">
        <template #icon>
          <van-icon name="todo-list"
                    size="20px"
                    color="#87d4eb"></van-icon>
        </template>
      </van-cell>
      <course-item2 :data="data.courseTodoList"></course-item2>
    </div>
    <!-- 底层导航栏 -->
    <van-tabbar route
                active-color="#87d4eb">
      <van-tabbar-item replace
                       to="/"
                       icon="search"></van-tabbar-item>
      <van-tabbar-item replace
                       to="/search"
                       icon="home-o"></van-tabbar-item>
      <van-tabbar-item replace
                       to="/user"
                       icon="user-o"></van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { getCurrentInstance, reactive, ref } from 'vue'
import CourseItem2 from '@/components/Course/user/CourseItem2.vue'
export default {
  setup () {
    const { ctx, proxy } = getCurrentInstance()
    const data = reactive({
      floatNav: [
        {
          vIcon: 'like-o',
          text: '我的收藏',
          badge: '',
          color: '#21abf6',
          size: '10px',
          derectTo: '/user/CourseCollect'
        },
        {
          vIcon: 'todo-list',
          text: '课堂作业',
          badge: 'new',
          color: '#fd6969',
          size: '40px',
          derectTo: '/Course/WorkList'
        },
        {
          vIcon: 'manager',
          text: '课程列表',
          badge: '',
          color: '#22d5cb',
          size: '40px',
          derectTo: '/user/MyCourseList'
        },
        {
          vIcon: 'add',
          text: '课程激活',
          badge: '',
          color: '#21abf6',
          size: '10px',
          derectTo: '/user'
        }
      ],
      courseRecommend: {
        image: '/src/assets/images/course1.png',
        title: '人人都是小“科学家”',
        oldprice: 300,
        nowprice: 299
      },
      courseTodoList: []
    })
    function handleChange () {
      proxy.$router.push('/Course/UserCourse')
    }
    function handleGetCourseInfo () {
      proxy.$router.push('/Course/CourseInfo')
    }
    function mygetCourseList () {
      proxy.$axios.course
        .getAllCourse({
          pageNo: 1,
          pageSize: 1000
        })
        .then((res) => {
          console.log(res)
          if (res.status === 200) {
            data.courseTodoList = res.data.data.records
            console.log(data.courseTodoList)
          }
        })
    }
    return {
      data,
      mygetCourseList,
      handleChange,
      handleGetCourseInfo
    }
  },
  components: {
    CourseItem2
  },
  created () {
    // 获取推荐课程or所有课程？
    // 访问接口
    this.mygetCourseList()
  }
}
</script>
<style lang="scss" scoped>
.banner {
  height: 200px;
  background: $theme-color1;
  &-content {
    display: flex;
    position: relative;
    top: 40px;
  }
  &-text {
    flex: 2;
    padding-left: 30px;
    .title {
      font-size: 20px;
      font-weight: 700;
      color: #fff;
    }
    .addition {
      color: #fff;
      font-size: 13px;
      font-weight: 300;
    }
    .btn {
      margin-top: 10px;
      &-about {
        width: 80px;
        height: 20px;
        font-size: 10px;
      }
    }
  }
  &-image {
    flex: 1;
    padding-right: 10px;
    padding-top: 20px;
    img {
      width: 90px;
    }
  }
}
.float-nav {
  margin-top: -30px;
  margin-bottom: 20px;
  &-box {
    margin: auto;
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  &-item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 1.5px 1.5px 0px rgba(0, 0, 0, 0.5);
    align-items: center;
    &-icon {
      text-align: center;
      border: 3px solid;
      border-radius: 50%;
    }
    &-text {
      padding: 5px;
      line-height: 24px;
      font-size: $fontsize-5;
      font-weight: 900;
    }
  }
}
.course-recommend {
  overflow: hidden;
  .wrap {
    padding: 10px;
    display: flex;
    .image {
      padding-right: 10px;
      img {
        width: 90px;
      }
    }
    .text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
      }
      .price {
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        .nowprice {
          color: #fdb52b;
          margin-right: 5px;
        }
        .oldprice {
          color: #d2d5cf;
          margin-right: 10px;
        }
        .btn {
          padding: 2px;
          height: 20px;
          font-size: 10px;
        }
      }
    }
  }
}
.courseList {
}
</style>
